<?
include('./admin/database.inc');
if (isset($_GET['sid'])){
	$sid = $_GET['sid'];
	$query = "SELECT * FROM slides WHERE slide_id = '$sid'";
} else {
	$query = "SELECT * FROM slides ORDER BY slide_id LIMIT 1";
}

$result = mysql_query($query);
$row = mysql_fetch_array($result);

$query2 = "SELECT * FROM slides ORDER BY slide_name ASC";
$result2 = mysql_query($query2);

?>

<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="apple-mobile-web-app-capable" content="yes">

	<title>Microscope instructor</title>
	<link rel="stylesheet" href="FrontEnd_files/main.css">
	<link href="FrontEnd_files/tablet.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 1024px) and (min-width: 720px)" >

	<script type="text/javascript" src="FrontEnd_files/jquery-1.8.2.min.js"></script>
	<script type="text/javascript" src="FrontEnd_files/fe_js.js"></script>
	<script type="text/javascript" src="FrontEnd_files/fe_hints.js"></script>
	<link rel="stylesheet" href="FrontEnd_files/fancybox/jquery.fancybox.css" type="text/css" media="screen" />
	<script type="text/javascript" src="FrontEnd_files/fancybox/jquery.fancybox.pack.js?v=2.1.1"></script>
	
	<script type="text/javascript" src="FrontEnd_files/pixastic.custom.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
		$(".slidelibrary").fancybox({
			maxWidth	: 600,
			maxHeight	: 600,
			fitToView	: false,
			width		: '70%',
			height		: '70%',
			autoSize	: true,
			closeClick	: false,
			openEffect	: 'none',
			closeEffect	: 'none'
		});
	});
	</script>



</head>
<body>
<div style="text-align:center; width:400px; margin-left:auto; margin-right:auto;">
<map id="_Image-Maps_7201209292338592" name="Image-Maps_7201209292338592">
<area shape="poly" coords="276,304,301,307,325,276,293,269" href="javascript:coarseInc()" alt="Coarse Inc" title="Coarse Inc"   />
<area shape="poly" coords="274,310,302,314,313,346,280,345" href="javascript:coarseDec()" alt="Coarse Decrease" title="Coarse Decrease"   />
<area shape="poly" coords="307,308,323,287,348,295,333,315" href="javascript:fineInc()" alt="Fine Increase" title="Fine Increase"   />
<area shape="poly" coords="307,317,331,320,341,338,316,338" href="javascript:fineDec()" alt="Fine Decrease" title="Fine Decrease"   />
<area shape="poly" coords="171,360,130,376,133,407,187,419,234,399,227,371" href="javascript:toggleLight()" alt="Light " title="Light "   />
<area shape="rect" coords="278,472,328,522" href="javascript:addOil()" alt="Add Oil" title="Add Oil"    />
<area shape="poly" coords="94,169,96,235,154,237,155,171" href="javascript:decMag()" alt="Decrease Magnification" title="Decrease Magnification"   />
<area shape="poly" coords="168,171,167,234,221,237,224,178" href="javascript:incMag()" alt="Increase Magnification" title="Increase Magnification"   />
<area shape="poly" coords="335,474,335,528,387,529,384,477" href="javascript:removeOil()" alt="Remove Oil" title="Remove Oil"   />
</map>

</div>
<div id="container"> 
	<div id="header">
		<strong>Virtual Microscope Slide Display</strong>
	</div>
	<div id="slidename">
		<a href="#slidelibrary" class="slidelibrary"><div id="slidelink">Change Slide</div></a>
		<div id="topmenu">
		<ul>
			<li><a onclick="hint()">Hints</a></li>
			<li><a onclick="guide();">Guide</a></li>
			<li><a onclick="addLabels()">Labels</a></li>
		</ul>
	</div>
		<strong><? echo $row['slide_name']; ?> - </strong><strong id = "mag" >10x </strong>
	</div>
	
<div class="microscopeinstructor">

<!-- The div containing all of the microscope controls -->
	<div id="navtools">
		<img id="microscope" src="FrontEnd_files/microscope.png" usemap="#Image-Maps_7201209292338592" width="400" height="550" alt="" />
		<img id="labelled" src="FrontEnd_files/microscope_labels.png" usemap="#Image-Maps_7201209292338592" width="400" height="550" alt="" style="display:none;" />
		<!--<img src="FrontEnd_files/microscope.png" usemap="hotSpots" width="400" height="550" alt="Microscope"/>-->
	</div>
	
	<!-- The div containing the displayed slide image -->
	<div id="field">
		
		<div id="micimage">
		<!-- Images preloaded for each magnification -->
		<img id="image" alt ="Microscope image" src="./images/<?echo $row['folder'].'/'.$row['100xfile']; ?>" style="display:none;">
		<img id="image1" alt ="Microscope image" src="./images/<?echo $row['folder'].'/'.$row['400xfile']; ?>"  style="display:none;">
		<img id="image2" alt ="Microscope image" src="./images/<?echo $row['folder'].'/'.$row['1000xfile']; ?>"  style="display:none;">
		</div>
		<div id="layer1" style="width: auto; height: 35px; padding-top:20px;">
			<div id = "hint"> <h4>Hint:</h4>
				<div id="hintcontent">&nbsp;</div>
			</div>
			<div id="guide"><h4>Guide:</h4>
				<ul>
					<li id="guide1">Turn on the light</li>
					<li id="guide2">Adjust the coarse focus until image is sharp</li>
					<li id="guide3">Increase the magnification to 40x</li>
					<li id="guide4">Adjust the coarse and fine focus until image is sharp</li>
					<li id="guide5">Increase magnification to 100x</li>
					<li id="guide6">Add oil to the slide</li>
					<li id="guide7">Adjust the fine focus until image is sharp</li>
				</ul>
			</div>
			
			<div id="controlbuttons">
			<button type="button" style="margin-left:10px;" onclick="addLabels()" > Toggle Labels </button><button type="button" autofocus="autofocus"  style="margin-left:10px;" onclick="guide();">
			Guide </button><button href="#slidelibrary"  style="margin-left:10px;margin-right:10px;" class="slidelibrary">Slide Selection</button><button type="button" autofocus="autofocus" onclick = "hint()">
			Hint </button>
			</div>
		</div>
		<div id = "notes"><h4>Slide Notes:</h4><? echo $row['notes']; ?> </div>
		<div style="clear:both"></div>
		
	</div>

	
	
	<div style="clear:both"></div>

</div>
<div style="clear:both"></div>
<div id="copyright">
		Created By CITS3200 Group D 2012
	</div>

</div>

<div id="slidelibrary" style="display:none;">
	<h2>Slide Library</h2>
	<table>
	<?
	$counter = 0;
	while($row = mysql_fetch_array($result2)){
	?>
	<tr class="<? echo (($counter % 2) == 0 ? "even" : "odd" );?>">
	<td><? echo $row['slide_name'];?></td>
	<td class="edit" rowspan="2"><a href="./index.php?sid=<? echo $row['slide_id'];?>">Use</a></td>
	</tr>
	<tr class="<? echo (($counter % 2) == 0 ? "even" : "odd" );?>"><td class="notes">Notes: <?echo $row['notes'];?></td></tr>
	<?
	$counter++;
	}?>
</table>
</div>



</body></html>